<template>
	<view v-if="loading" :class="['hb-skeleton',animate?'hb-skeleton-active':'']">
		<!-- 幻灯片 -->
		<view v-if="swiper" class="hb-skeleton__swiper"></view>
		<!-- 宫格 -->
		<view v-if="grid" class="hb-skeleton__grid hb-list  grid no-border" :class="['col-'+gridRowCol]">
			<view class="hb-list__item" v-for="(item,index) in gridRow" :key="index">
				<view class="hb-skeleton__grid--avatar">
					<view class="hb-skeleton__avatar hb-skeleton__avatar--round"></view>
				</view>
				<view class="hb-skeleton__title"></view>
			</view>
		</view>
		<!-- 基础用法，头像和标题和段落 -->
		<view class="hb-skeleton_basic">
			<view v-if="avatar" :class="['hb-skeleton__avatar','hb-skeleton__avatar--'+avatarShape]" :style="{'width':avatarSize,'height':avatarSize}"></view>
			<view class="hb-skeleton__content">
				<view v-if="title" class="hb-skeleton__title" :style="{'width':titleWidth}"></view>
				<view v-for="(item,index) in row" :key="index" class="hb-skeleton__row" :style="{'width' : (isArray ? rowWidth[index] : rowWidth) }"></view>
			</view>
		</view>
		<view v-if="list" class="hb-skeleton__list">
			<view v-for="(item,index) in listRow" :key="index" class="hb-skeleton_basic">
				<view class="hb-skeleton__avatar"></view>
				<view class="hb-skeleton__content">
					<view class="hb-skeleton__title"></view>
					<view class="hb-skeleton__row"></view>
				</view>
			</view>
		</view>
		<view v-if="cardList" class="hb-skeleton__card">
			<view v-for="(item,index) in cardListRow" :key="index" class="hb-skeleton__card--list">
				<view class="hb-skeleton__swiper"></view>
				<view class="hb-skeleton__content">
					<view class="hb-skeleton__title"></view>
					<view v-for="(item,index) in 2" :key="index" class="hb-skeleton__row"></view>
				</view>
			</view>
		</view>
	</view>
	<view v-else class="hb-skeleton__content--slot">
		<slot />
	</view>
</template>

<script>
	export default {
		name: "hb-skeleton",
		props: {
			row: {
				type: Number,
				default: 0
			},
			title: Boolean,
			avatar: Boolean,
			swiper: Boolean,
			loading: {
				type: Boolean,
				default: true
			},
			animate: {
				type: Boolean,
				default: true
			},
			avatarSize: {
				type: String,
				default: '32px'
			},
			avatarShape: {
				type: String,
				default: 'round'
			},
			titleWidth: {
				type: String,
				default: '40%'
			},
			rowWidth: {
				type: null,
				default: '100%',
				observer(val) {
					console.log('rowWidth', val)
					this.isArray = val instanceof Array
				}
			},
			grid: Boolean,
			gridRow: {
				type: Number,
				default: 3
			},
			gridRowCol: {
				type: Number,
				default: 3
			},
			list: Boolean,
			listRow: {
				type: Number,
				default: 3
			},
			cardList: Boolean,
			cardListRow: {
				type: Number,
				default: 3
			}
		},
		data() {
			return {
				isArray: false
			};
		},
		methods: {
			setRowWidth(val) {
				console.log('setRowWidth', val)
				this.isArray = val instanceof Array
			}
		}
	}
</script>

<style lang="less">
	@skeleton-avatar-background-color: #f2f2f2;
	@padding-sm: 32rpx;
	@padding-xs: 16rpx;
	@skeleton-row-height: 32rpx;
	@skeleton-row-margin-top: @padding-sm;

	.hb-skeleton {

		box-sizing: border-box;
		width: 100%;
		padding: 0 @padding-xs;

		&_basic {
			display: flex;
		}

		&__avatar {
			flex-shrink: 0;
			margin-right: @padding-sm;
			background-color: @skeleton-avatar-background-color;

			&--round {
				border-radius: 100%;
			}
		}

		&__content {
			flex: 1;
		}

		&__avatar+&__content {
			padding-top: @padding-xs;
		}

		&__row,
		&__title {
			height: @skeleton-row-height;
			background-color: @skeleton-avatar-background-color;
		}

		&__title {
			margin: 0;
		}

		&__row {
			&:not(:first-child) {
				margin-top: @skeleton-row-margin-top;
			}
		}

		&__title+&__row {
			margin-top: 20px;
		}

		&__swiper {
			width: 100%;
			border-radius: 20rpx;
			height: 300rpx;
			display: block;
			margin: 10rpx 0;
			background-color: @skeleton-avatar-background-color;
		}

		&__list {
			.hb-skeleton_basic+.hb-skeleton_basic {
				margin-top: 30rpx;
			}

			.hb-skeleton__avatar {
				width: 128rpx;
				height: 128rpx;
			}

			.hb-skeleton__title {
				width: 40%;
			}

			.hb-skeleton__row {
				width: 90%
			}
		}

		&__card {
			&--list+&--list {
				margin-top: 30rpx;
			}

			.hb-skeleton__swiper {
				height: 200rpx;
			}

			.hb-skeleton__title {
				width: 40%;
			}

			.hb-skeleton__row {
				width: 100%
			}

			.hb-skeleton__row+.hb-skeleton__row {
				width: 70%
			}
		}

		&__grid {

			&--avatar {
				text-align: center;
				margin: 10rpx 0;
			}

			.hb-skeleton__avatar {
				width: 64rpx;
				height: 64rpx;
				margin: 0 auto;

			}

			.hb-skeleton__title {
				width: 50%;
				margin: 0 auto;
			}
		}

		&-active &__avatar,
		&-active &__title,
		&-active &__row,
		&-active &__swiper {
			background: -webkit-gradient(linear, left top, right top, color-stop(25%, #f2f2f2), color-stop(37%, #e6e6e6), color-stop(63%, #f2f2f2));
			background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
			background-size: 400% 100%;
			-webkit-animation: hb-skeleton-loading 1.4s ease infinite;
			animation: hb-skeleton-loading 1.4s ease infinite;
		}
	}

	@keyframes hb-skeleton-loading {
		0% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0 50%;
		}
	}
</style>
